import React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { AntDesign, Entypo } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './src/page/Home';
import Login from './src/page/Login';
import Draft from './src/page/Draft';
import Mine from './src/page/Mine';
import AuthProvider from './src/context/AuthProvider';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

const TabBar = () => {
	return (
		<Tab.Navigator 
			screenOptions={{
				headerShown:true,
				headerTitleAlign:'center',
				tabBarActiveTintColor:'#1677ff',
				tabBarInactiveTintColor:'#333',
				tabBarInactiveBackgroundColor: '',
				tabBarActiveBackgroundColor: '',
				tabBarLabelStyle: {fontSize: 14},
				tabBarStyle:{backgroundColor:'#fff'},
			}} 
		>
			<Tab.Screen 
				name='Home'
				component={Home} 
				options={{ 
					title: '首页',
					tabBarIcon: ({color,size,focused})=>focused?<AntDesign name='home' size={size} color={color} />:<Entypo name='home' size={size} color={color} />
				 }} 
			/>
			<Tab.Screen 
				name='Draft'
				component={Draft} 
				options={({route}) => { 
					return {
						title: '投稿',
						tabBarIcon: ({color,size})=><Entypo name='publish' size={size} color={color} />,
						headerRight:() => <View style={{marginRight:10}}><Button title='投稿' onPress={() => route.params.setShowModal(true)} /></View> ,
					}
				 }} 
			/>
			<Tab.Screen 
				name='Mine'
				component={Mine} 
				options={()=>{
					return { 
						title: '我的',
						tabBarLabel:'我的',
						tabBarIcon: ({color,size})=><AntDesign name='user' size={size} color={color} />
					 }
				}}
			/>
		</Tab.Navigator>
	)
}

export default App = () => {
	return (
		<AuthProvider>
			<NavigationContainer>
				<Stack.Navigator screenOptions={{
					headerTitleAlign:'center',
					headerShown:false
				}}>
					<Stack.Screen 
						name='TabBar'
						component={TabBar}
					/>
					<Stack.Screen 
						name='Login'
						component={Login}
					/>
				</Stack.Navigator>
			</NavigationContainer>
		</AuthProvider>
  );
}
